<template>
  <div class="yunshurenwu ">
    <!-- 查询框 -->
    <div class="chaxunk">
      <!-- 表单 -->
      <el-form ref="form" :model="form" label-width="120px" :inline="true">
        <el-form-item label="任务编号:" style="width: 33%; margin-left: -10px; " prop="id">
          <el-input v-model="form.id" placeholder="请输入任务编号" style="width: 290px;  " clearable />
        </el-form-item>
        <el-form-item label="任务分配状态:" style="width: 33%; margin-left: -10px;" prop="assignedStatus">
          <el-select v-model="form.assignedStatus" placeholder="请选择" style="width: 290px;" clearable>
            <el-option label="未分配" value="1" />
            <el-option label="已分配" value="2" />
            <el-option label="待人工分配" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="满载状态:" style="width: 33%; margin-left: -10px;" prop="loadingStatus">
          <el-select v-model="form.loadingStatus" placeholder="请选择" style="width: 290px;" clearable>
            <el-option label="半载" value="1" />
            <el-option label="满载" value="2" />
            <el-option label="空载" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码:" style="width: 33%; margin-left: -10px;" prop="licensePlate">
          <el-input v-model="form.licensePlate" placeholder="请输入任务编号" style="width: 290px;" clearable />
        </el-form-item>
        <!-- <el-form-item label="起始地机构:" style="width: 33%; margin-left: -10px;">
          <el-cascader :options="options" :props="form.defaultProps" :show-all-levels="false" style="width: 290px;" clearable />
        </el-form-item>
        <el-form-item label="目的地机构:" style="width: 33%; margin-left: -10px;">
          <el-cascader :options="options" :props="form.defaultProps" :show-all-levels="false" style="width: 290px;" clearable />
        </el-form-item> -->
        <el-form-item label="起始地机构:" style="width: 33%; margin-left: -10px;" prop="startOrganId">
          <treeselect v-model="form.startOrganId" placeholder="请选择其实机构" style="width: 290px;" :normalizer="normalizer" :options="options" />
        </el-form-item>

        <el-form-item label="目的地机构:" style="width: 33%; height: 38px; margin-left: -10px;" prop="endOrganId">
          <treeselect v-model="form.endOrganId" style="width: 290px; " placeholder="请选择终点机构" :normalizer="normalizer" :options="options" />
        </el-form-item>
      </el-form>
      <el-form style="margin-left: 30px;">  <el-form-item>
        <el-button type="primary" style="width: 90px;" @click="getadllyunshu3">搜索</el-button>
        <el-button style="width: 90px;" @click="chongzhi">重置</el-button>
        <!-- @click="chongzhi" -->
      </el-form-item></el-form>

    </div>
    <!-- 任务总览 -->
    <div style="margin-top: 20px; margin-bottom: 20px; width: 1350px; background-color: white; font-size: 14px;">
      <span v-for="(item,index) in arrary" :key="index" :class="{active:index==a}" style="display: inline-block; text-align: center; height: 48px; line-height: 48px; width: 120px; " @click="a=index,status=item.id,getadllyunshu2()">
        <a style="width: 120px;" href="#">
          {{ arr[index] }}   {{ item.num }}
        </a></span>

    </div>
    <!-- 信息展示 -->
    <div style="width: 1350px;  background-color: white; padding: 28px;">
      <template>
        <el-table
          :data="tableData"

          style="width: 100%"
        >
          <el-table-column
            width="100px"
            type="index"
            label="序号"
            highlight-current-row="true"
          />
          <el-table-column
            prop="id"
            label="运输任务编号"
            width="200px"
          />
          <el-table-column
            prop="licensePlate"
            label="车牌号码"
            width="200px"
          >
            <template v-slot="{row}">
              <!-- <span @click="ck(row)">1111111111</span> -->
              <span>{{ row.truck.licensePlate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="startAgency"
            label="起始地"
            width="200px"
          ><template v-slot="{row}">
            <!-- <span @click="ck(row)">1111111111</span> -->
            <span>{{ row.startAgency.name }}</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="endAgency"
            label="目的地"
            width="200px"
          >
            <template v-slot="{row}">
              <!-- <span @click="ck(row)">1111111111</span> -->
              <span>{{ row.endAgency.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="运输任务状态"
            width="200px"
          >
            <template v-slot="{row}">
              <!-- <span @click="ck(row)" >1111111111</span> -->
              <span v-if="row.status===1">待执行</span>
              <span v-if="row.status===2">进行中</span>
              <span v-if="row.status===3">待确认</span>
              <span v-if="row.status===4">已完成</span>
              <span v-if="row.status===5">已取消</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="loadingStatus"
            label="车辆装载状态"
            width="200px"
          >
            <template v-slot="{row}">
              <!-- <span @click="ck(row)" >1111111111</span> -->
              <span v-if="row.loadingStatus===1">半载</span>
              <span v-if="row.loadingStatus===2">满载</span>
              <span v-if="row.loadingStatus===3">空载</span>
              <!-- <span v-if="row.status===4">已完成</span> -->
              <!-- <span v-if="row.status===5">已取消</span> -->
            </template>
          </el-table-column>
          <el-table-column
            prop="assignedStatus"
            label="任务分配状态"
            width="200px"
          >
            <template v-slot="{row}">
              <span v-if="row.assignedStatus===2">已分配</span>
              <span v-if="row.assignedStatus===3">带人工分配</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="planDepartureTime"
            label="计划发车时间"
            width="200px"
          />
          <el-table-column
            prop="actualDepartureTime"
            label="实际发车时间"
            width="200px"
          >
            <template v-slot="{row}">
              <span v-if="row.actualDepartureTime">{{ row.actualDepartureTime }}</span>
              <span v-else>爱 动特 no</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="updated"
            label="更新时间"
            width="200px"
          />
          <!-- <el-table-column
            width="180"
            label="操作"
            fixed="right"
          >
            <template>
              <el-row type="flex" justify="center" class="footer">
                <el-button type="text" style="color: #419eff;">查看</el-button>
                <el-popconfirm title="确定要删除吗？">
                  <el-button slot="reference" style="margin-left: 10px;" type="text">取消</el-button>
                </el-popconfirm>
                <el-button type="text" style="color: #419eff; margin-left: 5px;">手动调整</el-button>
              </el-row>
            </template>
          </el-table-column> -->

        </el-table>
      </template>
      <!-- 分页数据 -->
      <el-row type="flex" justify="center" class="footer" style="margin-top: 6px;">
        <div class="block">
          <el-pagination
            :current-page="pageData.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageData.pageSize"
            layout="total,sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
          <!-- @current-change="handleCurrentChange" -->
          <!-- @size-change="handleSizeChange" -->
        </div>
      </el-row>
    </div>

  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { transListToTreeData } from '@/utils/index'
import { getDepartTree, getadllyunshuApi } from '@/api/base'
export default {
  components: { Treeselect },
  data() {
    return {
      options: [
      ],
      tableData: [],
      a: '',
      arr: [
        ' 全部',
        ' 待提货',
        ' 进行中',
        ' 已完成',
        ' 已取消'
      ],
      normalizer(node) { // 机构的选项配置
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      form: {
        assignedStatus: null,
        id: null,
        loadingStatus: '',
        licensePlate: ``,
        startOrganId: null,
        endOrganId: null
      },
      total: null,
      pageData: {
        page: 1, // 当前页
        pageSize: 5 // 每页多少条数据
      },
      loading: true,
      arrary: [],
      status: null
    }
  },
  async created() {
    this.getadllyunshu()
    this.getTransportFist()
    this.tongjiyunshurw()
  },

  methods: {
    // 获取分页数据
    async getadllyunshu(status) {
      this.loading = true
      if (this.status) {
        status = this.status
        this.pageData.page = 1
        this.pageData.pageSize = 5
        console.log(this.pageData)
        const res = await getadllyunshuApi({ ...this.pageData, status })
        this.total = +(res.counts)
        this.tableData = res.items
        console.log(1)
      } else {
        const res = await getadllyunshuApi(this.pageData)

        this.total = +(res.counts)
        if (this.arrary.length === 0) {
          this.arrary.push({ num: res.counts, id: null })
        }
        this.tableData = res.items
        // console.log(2)
      }

      this.loading = false
    },
    // 获取机构详情
    async getTransportFist() {
      const res = JSON.parse(await getDepartTree())
      this.options = transListToTreeData(res, `0`)
      // console.log(this.options)
    },
    // 统计`运输任务详情
    async tongjiyunshurw() {
      // const res = await getadllyunshuApi({ ...this.pageData, status: null })
      // console.log(res)

      for (let i = 1; i < 6; i++) {
        if (i === 3) {
          continue
        }
        const res = await getadllyunshuApi({ ...this.pageData, status: i })
        this.arrary.push({ num: res.counts, id: i })
      }
      // console.log(this.arrary)
    },
    // 重置表单.
    chongzhi() {
      this.$refs.form.resetFields()
      this.getadllyunshu()
    },

    // 第几页
    handleCurrentChange(page) {
      this.pageData.page = page
      this.getadllyunshu()
    },
    // 一页多少条数据
    handleSizeChange(val) {
      this.pageData.pageSize = val
      this.getadllyunshu()
    },
    // 跳转页面
    async getadllyunshu2() {
      // console.log(111)
      this.pageData.page = 1
      this.pageData.pageSize = 5
      this.loading = true
      const status = this.status
      const res = await getadllyunshuApi({ ...this.pageData, status })
      console.log(res)
      // console.log(111)
      this.total = +(res.counts)

      this.tableData = res.items
      this.loading = false
    },
    // 搜索
    async getadllyunshu3() {
      this.pageData.page = 1
      this.pageData.pageSize = 5
      // console.log(this.pageData)
      console.log(this.form)
      const res = await getadllyunshuApi({ ...this.pageData, ...this.form })
      // assignedStatus: null,
      //   id: null,
      //   loadingStatus: '',
      //   licensePlate: '',
      //   startOrganId: '',
      //   endOrganId: ''
      console.log(res)
      this.total = +(res.counts)
      this.tableData = res.items
      // console.log(3)
    }

  }
}
</script>

<style lang="scss" scoped>
.yunshurenwu{
  // background-color: aqua;
  margin-top: 46px;
 padding: 23px 20px 20px 20px;
 .chaxunk{
  width: 1350px;
  height: 200px;
  background-color: white;
  padding: 20px 20px 20px 0;
 }
 }
 .active{background-color: #ffeeeb;
    color: #e15536;}
</style>
